<script lang="ts" setup>
const { clearHistory } = useSearch()
const { history } = storeToRefs(useSearch())
</script>

<template>
  <view between my>
    <view center>
      <image w-32 h-32 src="/static/images/icons/search/time.svg" />
      <text ml-1 text="30 #333333">搜索历史</text>
    </view>
    <image class="w-32 h-32" src="/static/images/icons/search/trash_can.svg" @click="clearHistory" />
  </view>
  <view items-center gap-3 flex="~ wrap">
    <navigator v-for="(item, key) in history" :key="key" :url="`/pages/search/index?content=${item}`" open-type="navigate"
      hover-class="navigator-hover">
      <view px-4 py-1 center rounded-full bg="#f2f2f2">
        <text text="22 #7f7f7f">
          {{ item }}
        </text>
      </view>
    </navigator>
  </view>
</template>
